<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="css/ui-box.css">
    <link rel="stylesheet" href="css/ui-base.css">
    <link rel="stylesheet" href="css/ui-color.css">
    <link rel="stylesheet" href="css/appcan.icon.css">
    <link rel="stylesheet" href="css/appcan.control.css">
    <link rel="stylesheet" href="index_content/my.css">
</head>

<body class="um-vp " ontouchstart>
    <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
        <!--header开始-->
        <div id="header" class="bc-text-head ub bc-head">
            <div class="ub title_top">
                <div class="ub ub-ac ub-pc umar-r umar-l ub-ver">
                    <div class="ub-f1 ub-img nav-icon1 nav-icon-uwh"></div>
                    <div class="font-s6">扫一扫</div>
                </div>
                <div class="ub-f1 uc-a ub uw50 uinput ub-ac ub-pc">
                    <div class="ub-img nav-icon2 nav-icon2-uwh umar-l"></div>
                    <input type="text" placeholder="熊出没" class="ub-f1" style="outline: none;" />
                    <div class="nav-inpt-bor"></div>
                </div>
                <div class="ub ub-ac ub-pc umar-l umar-r ub-ver">
                    <div class="ub-f1 ub-img nav-icon3 nav-icon-uwh"></div>
                    <div class="font-s6">消息</div>
                </div>
            </div>
            <div class="ub uhide title_top ub-ac" style="width: 100%;">
                <div class="nav-btn" id="nav-left"></div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">淘宝</h1>
                <div class="nav-btn nav-bt" id="nav-right"></div>
            </div>
            <div class="ub uhide title_top ub-ac" style="width: 100%;">
                <div class="nav-btn" id="nav-left"></div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">社区</h1>
                <div class="nav-btn nav-bt" id="nav-right"></div>
            </div>
            <div class="ub uhide title_top ub-ac" style="width: 100%;">
                <div class="nav-btn" id="nav-left"></div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">购物车</h1>
                <div class="nav-btn nav-bt" id="nav-right"></div>
            </div>
            <div class="ub uhide title_top ub-ac" style="width: 100%;">
                <div class="nav-btn" id="nav-left"></div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">我的淘宝</h1>
                <div class="nav-btn nav-bt" id="nav-right"></div>
            </div>
        </div>
        <!--header结束-->
        <!--content开始-->
        <div id="content" class="ub-f1 tx-l"></div>
        <!--content结束-->
        <!--footer start-->
        <!--         <div id="footer" class="uf sc-bg"></div> -->
        <div id="footer" class="ub bg-col2 font-s6">
            <div class="ub-f1 ub ub-ver ub-con ub-ac umar-t f-img active" id="index" data-index="0">
                <div class="ub-f1 ub-img fot-icon fot-icon-uwh"></div>
                <div class="ub-f1 umar-t tx-c umar-b ulev-1">首页</div>
            </div>
            <div class="ub-f1 ub ub-ver ub-con ub-ac umar-t f-img" id="taobao" data-index="1">
                <div class="ub-f1 ub-img fot-icon2 fot-icon-uwh"></div>
                <div class="ub-f1 umar-t tx-c ulev-1">淘宝</div>
            </div>
            <div class="ub-f1 ub ub-ver ub-con ub-ac umar-t f-img" id="shequ" data-index="2">
                <div class="ub-f1 ub-img fot-icon3 fot-icon-uwh"></div>
                <div class="ub-f1 umar-t tx-c ulev-1">社区</div>
            </div>
            <div class="ub-f1 ub ub-ver ub-con ub-ac umar-t f-img" id="gouwuche" data-index="3">
                <div class="ub-f1 ub-img fot-icon4 fot-icon-uwh"></div>
                <div class="ub-f1 umar-t tx-c ulev-1">购物车</div>
            </div>
            <div class="ub-f1 ub ub-ver ub-con ub-ac umar-t f-img" id="my" data-index="4">
                <div class="ub-f1 ub-img fot-icon5 fot-icon-uwh"></div>
                <div class="ub-f1 umar-t tx-c ulev-1">我的淘宝</div>
            </div>
        </div>
        <!--end footer-->
    </div>
    <script src="js/appcan.js"></script>
    <script src="js/appcan.control.js"></script>
    <script src="js/global.js"></script>
    <script src="js/appcan.tab.js"></script>
    <script>
    appcan.ready(function() {
        var top = $('#header').offset().height,
            bottom = $('#footer').offset().height,
            sWidth = $(window).width(),
            sHeight = $(window).height();
        appcan.frame.openMulti({ // 开启多浮动窗口
            popName: 'content',
            content: [{
                'initPageName': 'frame1',
                'inUrl': 'index_content.html'
            }, {
                'initPageName': 'frame2',
                'inUrl': 'taobao_content.html'
            }, {
                'initPageName': 'frame3',
                'inUrl': 'shequ_content.html'
            }, {
                'initPageName': 'frame4',
                'inUrl': 'gouwuche_content.html'
            }, {
                'initPageName': 'frame5',
                'inUrl': 'my_content.html'
            }],
            top: top,
            left: 0,
            index: 0,
            width: sWidth,
            height: sHeight - (top + bottom)
        })
        window.onorientationchange = window.onresize = function() {
            appcan.frame.resize("content", 0, titHeight);
        }
    });
    appcan.button(".nav-btn", "btn-act", function() {
        appcan.window.close(-1);
    })

    function changeTitleContent(index) {
        $('#header').find('.title_top').addClass('uhide');
        $('#header').find('.title_top').eq(index).removeClass('uhide');
    }
    appcan.button('#footer .f-img', 'btn-act', function() {
        var index = parseInt($(this).data('index'));
        appcan.frame.selectMulti('content', index); // 开启浮动窗口
        changeTitleContent(index); // 切换顶部工具栏
        changeTab(parseInt($(this).data('index')));
    })

    function changeTab(index) {
        index = parseInt(index);
        console.log(index);
        var domJQ = $('#footer .f-img').eq(index);
        domJQ.addClass('active').siblings().removeClass('active');
    }
    </script>
</body>

</html>
